<template>
  <div class="carousel">
    <div
      class="carousel-inner"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
    >
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item.src" :alt="item.alt" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="calrousel-footer" :style="{ '--a': currentItem.bgColor }">
      <div class="footer-main">
        <!-- 标题容器 -->
        <div>
          <!-- 标题 -->
          <div
            class="carousel-title"
            v-for="(item, index) in items"
            :key="index"
          >
            <div class="ellipsis" v-if="currentIndex == index">
              {{ item.title }}
            </div>
          </div>
          <!-- 切换按钮 -->
          <div class="carousel-control">
            <a class="carousel-control-prev" @click="prev">
              <img src="@/assets/svg/ic_public_arrow_left_filled.svg" />
            </a>
            <a class="carousel-control-next" @click="next">
              <img src="@/assets/svg/ic_public_arrow_right_filled.svg" />
            </a>
          </div>
        </div>
        <!-- 选择项 -->
        <div class="carousel-indicators">
          <span
            v-for="(item, index) in items"
            :key="index"
            :class="{ active: index === currentIndex }"
            @click="goto(index)"
          >
            <div class="pacman"></div>
            <div class="pacman"></div>
          </span>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onBeforeUnmount } from "vue";
let timer = ref(null);
let currentIndex = ref(0);
let items = ref([
  {
    src: require("@/assets/img/home/swiper/001.png"),
    link: "#",
    title: "测试标题1测试标题1测试标题1测试标题1测试标题1测试标题1",
    bgColor: "84, 101, 71", // rgb颜色数值
  },
  {
    src: require("@/assets/img/home/swiper/002.jpg"),
    link: "#",
    title: "测试标题2测试标题2测试标题2测试标题2",
    bgColor: "94, 107, 111", // rgb颜色数值
  },
  {
    src: require("@/assets/img/home/swiper/003.png"),
    link: "#",
    title: "测试标题3测试标题3测试标题3测试标题3测试标题3",
    bgColor: "135, 143, 164", // rgb颜色数值
  },
  {
    src: require("@/assets/img/home/swiper/004.png"),
    link: "#",
    title: "测试标题4测sfafdadafdsfadfafdafsfafaf",
    bgColor: "48, 54, 127", // rgb颜色数值
  },
  {
    src: require("@/assets/img/home/swiper/005.png"),
    link: "#",
    title: "测试标题5测试标题5测试标题5测试标题5",
    bgColor: "188, 154, 120", // rgb颜色数值
  },
]);
let isManualPause = ref(false);

//创建计算属性设置当前轮播图片对象
const currentItem = computed(() => items.value[currentIndex.value]);

//加载后初始化
onMounted(() => {
  runInv();
});

//关闭后销毁
onBeforeUnmount(() => {
  stopCarousel();
});

const next = () => {
  if (currentIndex.value === items.value.length - 1) {
    currentIndex.value = 0;
  } else {
    currentIndex.value++;
  }
};

const prev = () => {
  currentIndex.value =
    (currentIndex.value - 1 + items.value.length) % items.value.length;
};

const goto = (index) => {
  if (currentIndex.value !== index) {
    stopCarousel();
    currentIndex.value = index;
    isManualPause.value = true;
    setTimeout(() => {
      if (isManualPause.value) {
        runInv();
        isManualPause.value = false;
      }
    }, 5000);
  }
};

const runInv = () => {
  timer.value = setInterval(next, 5000);
};

const stopCarousel = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
};
</script>

<style lang="scss" scoped>
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.carousel-item {
  min-width: 100%; /* 使得每个item的宽度等于carousel的宽度 */
}

.carousel-item img {
  width: 100%;
  display: block;
}

.carousel-control {
  position: absolute;
  display: flex;
  top: 20px;
  right: 40px;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  width: 20px;
  height: 22px;
  color: white;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 3px 4px 3px 4px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.carousel-control-prev {
  left: -40px;
}

.carousel-control-next {
  left: 0px;
}

.carousel-indicators {
  position: absolute;
  display: flex;
  align-items: center;
  width: auto;
  height: 14px;
  line-height: 14px;
  bottom: 20px;
  left: 70px;
  transform: translateX(-50%);
}

.carousel-indicators span {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-indicators span.active {
  background-color: transparent; /* 将背景颜色设置为透明，以便显示.pacman动画 */
  animation: pacman-bite 0.5s infinite;
}

/* 定义吃豆子动画 */
@keyframes pacman-bite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.carousel-indicators span.active .pacman {
  display: block;
}

.pacman {
  display: none;
  position: absolute;
  width: 0px;
  height: 0px;
  top: -4px;
  left: -4px;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  border-left: 8px solid #fff;
  border-bottom: 8px solid #fff;
  border-radius: 50%;
}

.carousel-indicators span.active .pacman:nth-child(1) {
  animation: rotate_up 0.5s infinite;
}

.carousel-indicators span.active .pacman:nth-child(2) {
  animation: rotate_down 0.5s infinite;
}

@keyframes rotate_up {
  0% {
    transform: rotate(-90deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}

@keyframes rotate_down {
  0% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.calrousel-footer {
  position: relative;
  height: 85px;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(var(--a), 1),
    /* 底部深色 */ rgba(var(--a), 1),
    /* 中间颜色，半透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */
  );
}
.footer-main {
  position: relative;
  z-index: 99;
  height: 85px;
}

.carousel-title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 18px;
  color: #fff;
  width: 350px; /* 设置容器的最大宽度 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 130px;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--a), 1),
    /* 底部深色 */ rgba(var(--a), 0.9),
    /* 中间颜色，半透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */ rgba(var(--a), 0) /* 顶部透明 */
  );
}

.ellipsis {
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 确保文本在一行内显示 */
}
</style>
